<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按钮实现</title>
    <link rel="stylesheet" href="../../css/bootstrap.css">
    <script src="../../js/jquery-1.11.2.min.js"></script>
    <script src="../../js/bootstrap.min.js"></script>
    <style>
        body {
            padding: 50px;
        }
    </style>
</head>
<body><h6>按钮实现radio&checkbox</h6>
<!--<button class="btn  btn-primary" data-toggle="button">按钮</button>-->
<div  class="btn-group "  data-toggle="buttons">
    <label for="" class="btn btn-primary">
        <input type="radio" name="sex" checked="checked">男
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="sex">女
    </label>
</div>
<hr>

<div  class="btn-group "  data-toggle="buttons">
    <label for="" class="btn btn-primary">
        <input type="checkbox"  checked="checked">篮球
    </label>
    <label class="btn btn-primary">
        <input type="checkbox" >足球
    </label>
    <label for="" class="btn btn-primary">
        <input type="checkbox"   checked="checked">排球
    </label>
    <label class="btn btn-primary">
        <input type="checkbox" >羽毛球
    </label>
</div>

</body>
</html>
